<template>
    <a-row v-userAuth="'D14'">
        <a-row class='mytitle'>
            <!-- <a-icon :component = "obj" style="margin:0 .5rem 0 0"/> -->
            {{$t('Object-storage')}}
        </a-row>
        <a-row style="margin:1em">
            <a-card hoverable>
                <a-tabs :defaultActiveKey="defaultActiveKey" @change="changeTab">
                    <!-- 导出报表 -->
                    <a-button
                        v-userAuth="'D20-2'"
                        v-if="currentTabKey=='overview'" 
                        slot="tabBarExtraContent"
                        type="primary"
                        @click="exportReport"
                        :loading="exportLoading"
                        :class="exportLoading ? 'export-btn' : ''"
                    >
                        <!-- <i class="icon icon-export16f export-icon"></i> -->
                        
                        <Iconfont class="icon export-icon" type="icon-export16f"></Iconfont>
                        {{$t('Export-report')}}
                    </a-button>
                    <!-- 概况 -->
                    <a-tab-pane :tab="$t('Overview')" key="overview">
                        <ObjectOverview 
                            v-if="currentTabKey == 'overview'"
                        />
                    </a-tab-pane>
                    <!-- 用户 -->
                    <a-tab-pane :tab="$t('User')" key='1'>
                        <!-- v-userAuth="'D15'" -->
                        <User v-if="currentTabKey=='1'"></User>
                    </a-tab-pane>
                    <!-- 桶 -->
                    <a-tab-pane :tab="$t('Bucket')" key='2'>
                        <!-- v-userAuth="'D16'" -->
                        <Bucket v-if="currentTabKey=='2'"></Bucket>
                    </a-tab-pane>
                    <!-- <a-tab-pane :tab="$t('Object-storage-configuration')" key='3'>
                        <Service></Service>
                    </a-tab-pane> -->
                    <!-- 区域管理 -->
                    <a-tab-pane :tab="$t('Area-manage')" key="area">
                        <AreaManage 
                            v-if="currentTabKey == 'area'"
                        />
                    </a-tab-pane>
                </a-tabs>
            </a-card>
        </a-row>
    </a-row>
</template>
<script>
import User from '../../../components/storage_mgr/object/user/usermgr'
import Service from '../../../components/storage_mgr/object/objset/service'
import Bucket from '../../../components/storage_mgr/object/bucket/bucketmgr'
// import obj from '../../../../static/images/svg/ic_Objectstorage04.svg'
import ObjectOverview from '@/views/storage_mgr/object/ObjectOverview'
import AreaManage from '@/views/storage_mgr/object/AreaManage'

import downloadFile from '@/assets/js/downloadFile'

export default {
    name:'Objview',
    // template: '<a-icon :component = "obj" />',
    components:{ User, Service, Bucket, ObjectOverview, AreaManage },
    data(){
        return{
            // obj,
            defaultActiveKey: 'overview',
            currentTabKey: 'overview',
            exportLoading: false,
        }
    },

    created() {
        this.currentTabKey = JSON.parse(localStorage.getItem('obj_current_tab')) || 'overview';
        this.defaultActiveKey = JSON.parse(localStorage.getItem('obj_current_tab')) || 'overview';
    },

    beforeDestroy() {
        localStorage.removeItem('obj_current_tab');
    },

    methods:{
        // tab改变事件
        changeTab(key) {
            this.currentTabKey = key;
            localStorage.setItem('obj_current_tab', JSON.stringify(key));
        },

        //导出报表
        async exportReport() {
            this.exportLoading = true;
            const res = await this.$api.objectOverview.exportReportRequest({responseType: 'blob'});
            // console.log('导出报表', res)
            if(res.data) {
                downloadFile(res.data, 'application/vnd.ms-excel', 'reportInfo.xlsx');
                this.$message.success(this.$t('Export-ok'));
            }else {
                this.$message.success(this.$t('Export-no'));
            }
            this.exportLoading = false;
        },
    }
}
</script>

<style scoped>
    .export-btn {
        width: 100px;
    }
</style>
